<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <p>username--->{{username}}</p>
  <p>age--->{{age}}</p>
  <hr/>
  <child sex="男" :age="age" :username="username"></child>
</div>
</body>
<script>
  new Vue({
    el:"#root",
    data:{
      age:12,
      username:"zhangsan",
    },
    components:{
      Child:{
        props:["sex","username","age"],
        data(){
          const num = this.age+100;
          return {
            num:this.age,
            age:200
          }
        },
        template:(`
				    <div>
				        <h3>Child</h3>
				        <p>username:{{username}}</p>
				        <p>age:{{age}}</p>
				        <p>sex:{{sex}}</p>
				        <p>num:{{num}}</p>
				        <button @click="fn">点我</button>
                    </div>
				`),
        methods:{
          fn(){
            // console.log("fn",this)
            // this.age = 200;
          }
        }
      }
    }
  })
</script>
</html>